<template>
  <div class="order-manage">
    <el-tabs type="card" v-model="activeTab" @tab-click="tabClick">
      <!--订单报价-->
      <el-tab-pane :name="TABS_TYPE.ORDER_PRICE">
        <span slot="label">
          <i class="fa fa-money"></i> 订单报价
        </span>
        <el-form :inline="true" :model="price_search" size="mini" style="margin-left: 10px">
          <el-form-item label="客户">
            <el-input v-model="price_search.customerName" placeholder="请输入客户名"></el-input>
          </el-form-item>
          <el-form-item label="订单创建日期">
            <el-date-picker
              v-model="price_search.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="price_search.status">
              <el-option
                :key="QUOTATIONS_STATUS.INPROGRESS.val"
                :value="QUOTATIONS_STATUS.INPROGRESS.val"
                :label="QUOTATIONS_STATUS.INPROGRESS.name"
              ></el-option>
              <el-option
                :key="QUOTATIONS_STATUS.DONE.val"
                :value="QUOTATIONS_STATUS.DONE.val"
                :label="QUOTATIONS_STATUS.DONE.name"
              ></el-option>
              <el-option
                :key="QUOTATIONS_STATUS.ALL.val"
                :value="QUOTATIONS_STATUS.ALL.val"
                :label="QUOTATIONS_STATUS.ALL.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
          <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
          <el-table-column width="100" label="报价状态">
            <template
              slot-scope="scope"
            >{{scope.row.quotationStatus?QUOTATIONS_STATUS[scope.row.quotationStatus].name:''}}</template>
          </el-table-column>
          <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
          <el-table-column prop="prodName" width="300" label="产品"></el-table-column>
          <el-table-column prop="orderDate" label="创建时间"></el-table-column>
          <el-table-column label="报价">
            <template slot-scope="scope">
              <span>{{scope.row.priceQuotation?scope.row.priceQuotation+'元':'暂无'}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <span
                class="t-link"
                v-if="scope.row.quotationStatus === QUOTATIONS_STATUS.INPROGRESS.val"
                @click="showUpdatePriceDialog(scope.row,'订单报价')"
              >
                <span>去报价</span>
              </span>
              <span
                class="t-link"
                v-if="scope.row.quotationStatus === QUOTATIONS_STATUS.DONE.val"
                @click="showUpdatePriceDialog(scope.row,'修改报价')"
              >
                <span>去修改</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!--订单支付-->
      <el-tab-pane :name="TABS_TYPE.ORDER_PAY">
        <span slot="label">
          <i class="fa fa-cc-paypal"></i> 订单支付
        </span>
        <el-form :inline="true" :model="pay_search" size="mini" style="margin-left: 10px">
          <el-form-item label="客户">
            <el-input v-model="pay_search.customerName" placeholder="请输入客户名"></el-input>
          </el-form-item>

          <el-form-item label="订单创建日期">
            <el-date-picker
              v-model="pay_search.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
          <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
          <el-table-column width="100" label="支付状态">
            <template slot-scope="scope">{{scope.row.statusDesc}}</template>
          </el-table-column>
          <el-table-column prop="customerName" width="80" label="客户"></el-table-column>

          <el-table-column prop="prodName" width="300" label="产品"></el-table-column>
          <el-table-column prop="orderDate" label="创建时间"></el-table-column>
          <el-table-column label="订单报价">
            <template slot-scope="scope">
              <span>{{scope.row.priceQuotation?scope.row.priceQuotation+'元':'暂无'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="t-link" @click="toPaymentForm(scope.row)">修改为已支付</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!--业务员分配-->
      <el-tab-pane :name="TABS_TYPE.ORDER_ASSIGN">
        <span slot="label">
          <i class="el-icon-date"></i> 业务员分配
        </span>
        <el-form :inline="true" :model="assign_search" size="mini" style="margin-left: 10px">
          <el-form-item label="客户">
            <el-input v-model="assign_search.customerName" placeholder="请输入客户名"></el-input>
          </el-form-item>
          <el-form-item label="订单创建日期">
            <el-date-picker
              v-model="assign_search.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
          <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
          <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
          <el-table-column label="业务员">
            <template slot-scope="scope">{{scope.row.empName?scope.row.empName:'暂无'}}</template>
          </el-table-column>
          <el-table-column prop="prodName" width="300" label="产品"></el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <span>{{scope.row.pricePay?scope.row.pricePay+'元':'暂无'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="t-link" @click="showEmployeeAssignDialog(scope.row)">分配业务员</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 订单追踪 -->
      <el-tab-pane :name="TABS_TYPE.ORDER_TASK_TRACK">
        <span slot="label">
          <i class="el-icon-date"></i> 订单追踪
        </span>
        <el-form :inline="true" :model="track_search" size="mini" style="margin-left: 10px">
          <el-form-item label="客户">
            <el-input v-model="track_search.customerName" placeholder="请输入客户名"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="track_search.status">
              <el-option label="未完成" value="AVAILABLE"></el-option>
              <el-option label="已完成" value="DONE"></el-option>
              <el-option label="全部" value="ALL"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单创建日期">
            <el-date-picker
              v-model="track_search.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="expand-row">
                <div class="info-block">
                  <div class="title">订单基本信息</div>
                  <div class="content">
                    <el-row>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">订单号</div>
                          <div>{{props.row.orderId}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">客户</div>
                          <div>{{props.row.customerName}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">产品</div>
                          <div>{{props.row.prodName}}</div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">业务员</div>
                          <div>{{props.row.empName?props.row.empName:'暂无'}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">价格</div>
                          <div>{{props.row.price?props.row.price+'元':'暂无'}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">订单状态</div>
                          <div>{{props.row.statusDesc}}</div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">
                        <div class="item">
                          <div class="label">创建时间</div>
                          <div>{{props.row.createTime}}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div class="info-block" v-if="props.row.orderTaskItems">
                  <div class="title">订单服务跟踪</div>
                  <div class="content">
                    <el-row v-for="task in props.row.orderTaskItems">
                      <el-col :span="16">
                        <div class="item">
                          <div class="label" style="width: 100px">{{task.name}}</div>
                          <div style="flex: 1">{{task.remark?task.remark:'暂无'}}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
          <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
          <el-table-column label="业务员">
            <template slot-scope="scope">{{scope.row.empName?scope.row.empName:'暂无'}}</template>
          </el-table-column>
          <el-table-column prop="prodName" width="300" label="产品"></el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <span>{{scope.row.pricePay?scope.row.pricePay+'元':'暂无'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <!--价格修改弹出层-->
    <el-dialog :title="dialogTitle" :visible.sync="priceModifyDialogVisible" width="30%" top="30vh">
      <el-form>
        <el-form-item label-width="120px" label="请输入价格">
          <el-input type="number" v-model="newPrice" min="1"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="priceModifyDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="updatePrice()">修改</el-button>
      </span>
    </el-dialog>
    <!-- 支付备注弹出层 -->
    <el-dialog :visible.sync="paymentStatusDialogVisible" title="支付备注">
      <el-form label-width="100px" :model="paymentForm" ref="updatePaymentForm">
        <el-form-item label="备注" prop="paymentRemark" :rules="[{required:true,message:'备注不能为空'}]">
          <el-input type="textarea" v-model="paymentForm.paymentRemark"></el-input>
        </el-form-item>
        <el-form-item
          label="支付金额"
          prop="paymentPrice"
          :rules="[{required:true,message:'支付金额不能为空'}]"
        >
          <el-input type="number" v-model="paymentForm.paymentPrice"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentStatusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrderPayStatus()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 业务员分配对话框 -->
    <el-dialog :visible.sync="employeeSelectDialogVisible" title="业务员分配">
      <el-table
        :data="availableEmployees"
        ref="employSelectTable"
        highlight-current-row
        @current-change="handleEmployeeSelectChange"
      >
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column label="是否星标业务员">
          <template slot-scope="scope">{{scope.row['STAR']?'是':'否'}}</template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="employeeSelectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="assginEmployee()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import { mapActions } from 'vuex';
import { assginEmployeeForOrder, checkOrder } from '@/api/order_manage';
import {
  FETCH_ORDER_LIST_FAILED,
  SUCCESS_CODE,
  ORDER_STATUS,
  OP_SUCCESS,
  OP_FAIL,
  ORDER_TASK_STATUS,
  QUOTATIONS_STATUS,
  PAYMENT_STATUS,
  DISTRIBUTE_STATUS,
  SERVING_STATUS,
  CHECK_STATUS
} from '@/config/config';

export default {
  name: 'order_manage',
  data: function() {
    return {
      ORDER_TASK_STATUS: ORDER_TASK_STATUS,
      ORDER_STATUS: ORDER_STATUS,
      QUOTATIONS_STATUS: QUOTATIONS_STATUS,
      PAYMENT_STATUS: PAYMENT_STATUS,
      DISTRIBUTE_STATUS: DISTRIBUTE_STATUS,
      SERVING_STATUS: SERVING_STATUS,
      CHECK_STATUS: CHECK_STATUS,
      TABS_TYPE: {
        // 订单选项卡名称
        ORDER_PRICE: 'ORDER_PRICE', // 订单报价
        ORDER_PAY: 'ORDER_PAY', // 订单支付
        ORDER_ASSIGN: 'ORDER_ASSIGN', // 订单分配
        ORDER_TASK_TRACK: 'ORDER_TASK_TRACK' // 订单服务追踪
      },
      activeTab: 'ORDER_PRICE',
      pagination: {},
      price_search: {
        limit: 15, // 每页数据大小
        pageNum: 1, // 当前页数
        total: 0, // 全部数据条数
        customerName: '',
        createTime: [], // 订单创建时间 开始~结束
        status: QUOTATIONS_STATUS.INPROGRESS.val // 订单状态
      },
      pay_search: {
        limit: 15, // 每页数据大小
        pageNum: 1, // 当前页数
        total: 0, // 全部数据条数
        customerName: '', // 客户名
        createTime: [], // 订单创建时间 开始~结束
        status: PAYMENT_STATUS.NOTPAY.val
      },
      assign_search: {
        limit: 15, // 每页数据大小
        pageNum: 1, // 当前页数
        total: 0, // 全部数据条数
        customerName: '', // 客户名
        createTime: [], // 订单创建时间 开始~结束
        status: ORDER_STATUS.NOTDISTRIBUTE.val
      },
      track_search: {
        limit: 15, // 每页数据大小
        pageNum: 1, // 当前页数
        total: 0, // 全部数据条数
        customerName: '', // 客户名
        createTime: [], // 订单创建时间 开始~结束
        status: ORDER_STATUS.SERVING.val
      },
      expandedItem: {},
      status: ORDER_STATUS.ALL.val,
      orderList: [],
      selectedRow: {},
      dialogTitle: '',
      // 修改价格模态框
      priceModifyDialogVisible: false,
      newPrice: 1, // 修改价格中的新价格
      // 手动修改支付状态模态框
      paymentStatusDialogVisible: false,
      paymentSelectedOrder: null,
      paymentForm: {
        paymentRemark: '',
        paymentPrice: 0
      },
      toPaymentForm(selectedOrder) {
        this.paymentSelectedOrder = selectedOrder
        this.paymentStatusDialogVisible = true
      },
      // 业务员分配对话框
      employeeSelectOrder: null,
      employeeSelectDialogVisible: false,
      availableEmployees: [], // 可选的业务员
      selectedEmployeeId: 0, // 被选中的业务员ID
      showEmployeeAssignDialog(selectedOrder) {
        this.employeeSelectOrder = selectedOrder
        this.employeeSelectDialogVisible = true
        this.getAvaliableEmployees({
          id: this.employeeSelectOrder.prodId,
          location: this.employeeSelectOrder.location
        }).then(result => {
          if (result.status === SUCCESS_CODE) {
            this.availableEmployees = result.data
            // if (selectedRow.empId) this.selectedEmployeeId = selectedRow.empId;
          } else {
            this.$swal(OP_FAIL, '', 'error')
          }
        })
      }
    }
  },
  methods: {
    ...mapActions('orderManage', [
      'getOrderList',
      'updateOrderPrice',
      'getAvaliableEmployees',
      'updateOrderEmploy',
      'getOrderTasks',
      'updatePayStatus'
    ]),
    fetchOrderList(searchObj) {
      let params = Object.assign({}, { ...this.pagination, ...searchObj })
      this.getOrderList(params).then(result => {
        if (result.status === SUCCESS_CODE) {
          this.pagination.total = result.data.total
          this.orderList = result.data.results
        } else {
          this.$swal(FETCH_ORDER_LIST_FAILED, '', 'error')
        }
      })
    },
    handleCurrentChange(currentPage) {
      console.log(this.pagination)
      this.pagination.pageNum = currentPage
      this.searchOrder()
    },
    handleSizeChange(size) {
      this.pagination.limit = size
      this.searchOrder()
    },
    getActiveStep(status) {
      let i = 0
      this.ORDER_TASK_STATUS.forEach((st, idx) => {
        if (st.val === status) {
          i = idx
        }
      })
      return i
    },
    /**
     * 显示价格修改框
     */
    showUpdatePriceDialog(selectedRow, dialogTitle) {
      this.selectedRow = selectedRow
      this.dialogTitle = dialogTitle
      if (selectedRow.price) {
        this.newPrice = selectedRow.price
      } else {
        this.newPrice = 1
      }
      this.priceModifyDialogVisible = true
    },
    /**
     * 更新订单价格
     */
    updatePrice() {
      this.updateOrderPrice({
        orderId: this.selectedRow.orderId,
        price: this.newPrice
      }).then(result => {
        if (result.status === SUCCESS_CODE) {
          this.$swal(OP_SUCCESS, '', 'success')
        } else {
          this.$swal(OP_FAIL, '', 'error')
        }
        this.searchOrder()
        this.priceModifyDialogVisible = false
      })
    },

    updateEmployee() {
      this.updateOrderEmploy({
        orderId: this.selectedRow.id,
        employeeId: this.selectedEmployeeId
      }).then(result => {
        if (result.status === SUCCESS_CODE) {
          this.$swal(OP_SUCCESS, '', 'success')
        } else {
          this.$swal(OP_FAIL, '', 'error')
        }
        this.searchOrder()
        this.employeeSelectDialogVisible = false
      })
    },
    /**
     * 展开表格一行数据
     */
    expandRow(row) {
      if (!row.tasks) {
        this.getOrderTasks(row.id).then(result => {
          row.tasks = result.data
          console.log(result)
        })
      }
      // this.expandedItem = row
    },
    /**
     * 点击选项卡处理
     */
    tabClick() {
      switch (this.activeTab) {
        case this.TABS_TYPE.ORDER_PRICE:
          // this.price_search.status = this.ORDER_STATUS.QUOTATION.val
          this.pagination = this.price_search
          this.searchOrder()
          break;
        case this.TABS_TYPE.ORDER_PAY:
          this.pagination = this.pay_search
          this.searchOrder()
          break;
        case this.TABS_TYPE.ORDER_ASSIGN:
          this.pagination = this.assign_search
          this.searchOrder()
          break;
        case this.TABS_TYPE.ORDER_TASK_TRACK:
          this.pagination = this.track_search
          this.searchOrder()
          break;
      }
    },
    /**
     * 获取请求参数对象
     */
    getSearchParams(searchObj, type) {
      delete searchObj.total
      let params = { status: searchObj.status, type: type }

      if (searchObj.customerName) {
        params['customerName'] = searchObj.customerName
      }
      if (searchObj.createTime) {
        params['createTimeS'] = searchObj.createTime[0]
        params['createTimeE'] = searchObj.createTime[1]
      }
      return params
    },
    /**
     * 查询订单
     */
    searchOrder() {
      switch (this.activeTab) {
        case this.TABS_TYPE.ORDER_PRICE:
          this.fetchOrderList(
            this.getSearchParams(this.price_search, 'quotation')
          )
          break;
        case this.TABS_TYPE.ORDER_PAY:
          this.fetchOrderList(this.getSearchParams(this.pay_search, 'payment'))
          break;
        case this.TABS_TYPE.ORDER_ASSIGN:
          this.fetchOrderList(
            this.getSearchParams(this.assign_search, 'distribution')
          )
          break;
        case this.TABS_TYPE.ORDER_TASK_TRACK:
          this.fetchOrderList(this.getSearchParams(this.track_search, 'history'))
          break;
      }
    },
    /**
     *  手动将未支付订单改为已支付
     */
    updateOrderPayStatus() {
      this.$refs['updatePaymentForm'].validate(valid => {
        if (valid) {
          console.log(this)
          console.log(this.paymentForm)
          this.updatePayStatus({
            orderId: this.paymentSelectedOrder.orderId,
            remark: this.paymentForm.paymentRemark,
            fee: this.paymentForm.paymentPrice
          }).then(result => {
            this.paymentStatusDialogVisible = false
            this.handleOpSuccess(result)
            this.searchOrder()
          })
        }
      })
    },
    handleOpSuccess(result) {
      if (result.status === SUCCESS_CODE) {
        this.$swal(OP_SUCCESS, '', 'success')
      } else {
        if (result && result.msg) {
          this.$swal(result.msg, '', 'error')
        } else {
          this.$swal(OP_FAIL, '', 'error')
        }
      }
    },
    handleEmployeeSelectChange(val) {
      this.selectedEmployeeId = val.empId
    },
    /**
     * 为订单分配业务员
     */
    assginEmployee() {
      assginEmployeeForOrder(
        this.employeeSelectOrder.orderId,
        this.selectedEmployeeId
      ).then(resp => {
        let data = resp.data
        this.handleOpSuccess(data)
        this.employeeSelectDialogVisible = false
      })
    },
    /**
     * 检验订单
     */
    passCheck(order) {
      let remark = '';
      let modal = this.$swal({
        title: '确定要让该订单通过检验吗？',
        input: 'textarea',
        inputPlaceholder: '请输入检验备注......',
        allowOutsideClick: false,
        showCloseButton: true,
        showCancelButton: true,
        confirmButtonText: '通过',
        cancelButtonText: '拒绝',
        onClose: function() {
          remark = modal.getInput().value
        }
      })

      modal.then(result => {
        let status = 'DONE';
        if (!result) return
        if (result.dismiss === 'close') return
        if (result.dismiss === 'cancel') {
          status = 'REFUSE';
        }
        let getCheckId = orderCheckItems => {
          return orderCheckItems.filter(
            item => item.checkStatus === 'PENDING'
          )[0].checkId
        };
        checkOrder(getCheckId(order.orderCheckItems), status, remark).then(
          resp => {
            let result = resp.data
            this.handleOpSuccess(result)
            this.searchOrder()
          }
        )
      })
    }
  },

  created() {
    this.pagination = this.price_search
    this.searchOrder()
  }
}
</script>

<style>
.order-manage .el-form-item {
  margin-bottom: 2px;
}

.order-manage .el-radio {
  margin: 10px;
  min-width: 260px;
}

.expand-row {
  border: 1px solid #f5f7fa;
  border-left: none;
  border-right: none;
  margin: -15px -50px;
  padding: 15px;
  font-size: 13px;
}

.expand-row .info-block {
  display: flex;
}

.expand-row .info-block .title {
  width: 150px;
  font-weight: bold;
  color: #909399;
  font-size: 15px;
}

.expand-row .info-block .content {
  flex: 1;
  margin: 30px 0 20px 0;
}

.expand-row .item {
  width: 100%;
  display: flex;
  margin: 5px;
}

.expand-row .item .label {
  width: 60px;
}

.expand-row .item .label:after {
  content: ":";
  display: inline-block;
  margin-left: 2px;
}

.el-step__title {
  font-size: 12px;
}
</style>
